<template>
    <table class="mailTable" style="table-layout:fixed;">
        <tr class="baseUserInfo">
            <td>姓<i style="opacity: 0">占位</i>名</td>
            <td>{{ baseUserInfo.name }}</td>
            <td>参评职称</td>
            <td colspan="3">{{ baseUserInfo.titleType }}</td>
            <td rowspan="5" style="background: none">
                <img class="baseUserInfoPic" :src="baseUserInfo.attr5">
            </td>
        </tr>
        <tr class="baseUserInfo">
            <td>部&#12288; 职&#12288; 别</td>
            <td>{{ baseUserInfo.official_rank }}</td>
            <td>出生年月</td>
            <td>{{ baseUserInfo.birth.substring(0, 7) }}</td>
            <td>年<i style="opacity: 0">占位</i>龄</td>
            <td>{{ baseUserInfo.age }}</td>
        </tr>
        <tr class="baseUserInfo">
            <td>人员类别</td>
            <td>{{ baseUserInfo.personnel_category }}</td>
            <td>现专业技术职务</td>
            <td>{{ baseUserInfo.technology_title }}</td>
            <td>现专业技术职务时间</td>
            <td>{{ baseUserInfo.appoint_time.substring(0, 7) }}</td>

        </tr>
        <tr class="baseUserInfo">
            <td>现技术等级</td>
            <td>{{ baseUserInfo.technology_level }}</td>
            <td>现技术等级时间</td>
            <td>{{ baseUserInfo.technology_level_time.substring(0, 7) }}</td>
            <td>入伍(工作)时间</td>
            <td>{{ baseUserInfo.enlistment_time.substring(0, 7) }}</td>

        </tr>
        <tr class="baseUserInfo">
            <td>入党(团)时间</td>
            <td>{{ baseUserInfo.caucus_time.substring(0, 7) }}</td>
            <td>学<i style="opacity: 0">占位</i>历</td>
            <td>{{ baseUserInfo.last_education }}</td>
            <td>学<i style="opacity: 0">占位</i>位</td>
            <td>{{ baseUserInfo.highest_degree }}</td>
        </tr>
        <tr class="table-info">
            <td>培训经历</td>
            <td colspan="6">
                <p v-if="info.trainingExperience">{{ info.trainingExperience }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>教学工作量</td>
            <td colspan="6">
                <p v-if="info.teachingSituation">{{ info.teachingSituation }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>教学质量</td>
            <td colspan="6">
                <p v-if="info.teachingQuality">{{ info.teachingQuality }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>教学成果及奖励</td>
            <td colspan="6">
                <div v-for="(item,i) in info.teachingRewards" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>指导学生</td>
            <td colspan="6">
                <div v-for="(item,i) in info.guideStudents" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>教材讲义</td>
            <td colspan="6">
                <p v-if="info.textbookHandout">{{ info.textbookHandout }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>科技成果及奖励</td>
            <td colspan="6">
                <div v-for="(item,i) in info.teachingAchievements" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>参与科研项目情况</td>
            <td colspan="6">
                <p v-if="info.scientificProjects">{{ info.scientificProjects }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>专著情况</td>
            <td colspan="6">
                <div v-for="(item,i) in info.monographs" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>学术论文<br/>咨询报告</td>
            <td colspan="6">
                <div v-for="(item,i) in info.academicPapers" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>入选人才工程计划和个人表彰奖励项目</td>
            <td colspan="6">
                <p v-if="info.talentEngineering">{{ info.talentEngineering }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>奖惩情况</td>
            <td colspan="6">
                <p v-if="info.rewardPunishment">{{ info.rewardPunishment }}</p>
                <p v-else>无</p>
            </td>
        </tr>
        <tr class="table-info">
            <td>完成任务情况</td>
            <td colspan="6">
                <div v-for="(item,i) in info.completionTasks" :key="i">
                    <p v-if="item">{{ item }}</p>
                    <p v-else>无</p>
                </div>
            </td>
        </tr>
        <tr class="table-info">
            <td>完成其他工作简述</td>
            <td colspan="6">
                <p v-if="info.otherWorkDescription">{{ info.otherWorkDescription }}</p>
                <p v-else>无</p>
            </td>
        </tr>
    </table>
</template>

<script>
export default {
    name: "tablePreview",
    data() {
        return {
            baseUserInfo:null,
            info:{},
        }
    },
    props:['resData'],
    created() {
        this.init()
    },
    methods:{
        init(){
            this.baseUserInfo = this.resData.baseUserInfo;
            this.info = this.resData.info;
            Object.keys(this.info).forEach((key,i)=>{
                if(typeof this.info[key] == 'object'){
                    if(this.info[key].listReview == undefined){
                        this.info[key] = this.handleInfoData(this.info[key])
                    }
                }
            });
            console.log(this.info)
        },
        handleInfoData(key){
            let newArr = key.filter(item => item)
            return   newArr.length>0 ? newArr : '无'
        },
        handleToBasicInfo() {
            let query = { userId:this.baseUserInfo.user_id }
            let routeData = this.$router.resolve({ path: '/personalInfo', query: query});
            window.open(routeData.href, '_blank');
        }
    },
}
</script>

<style scoped>
.mailTable, .mailTable tr, .mailTable tr td {
    border: 1px solid #E6EAEE;
}

.mailTable {
    color: #71787E;
    margin: 30px auto;
    width: 96%;
}

.mailTable tr td {
    border: 1px solid #E6EAEE;
    box-sizing: border-box;
    vertical-align: middle;
    height: 44px;
    padding: 0 10px;
    font-size: 16px;
    position: relative;
    font-family: KaiTi;
}
.mailTable tr td:nth-of-type(even){
    min-width: 156px;
    color: rgba(237, 88, 102, 1);
    vertical-align: middle;
}
.mailTable tr td:nth-of-type(odd) {
    max-width: 180px;
    text-align: center;
    background-color: #EFF3F6;
    color: #393C3E;
}
.baseUserInfo td{
    text-align: center !important;
}
/*.baseUserInfo td:nth-of-type(even){*/
/*    color: rgba(237, 88, 102, 1);*/
/*}*/
/*.baseUserInfo td:nth-of-type(odd){*/
/*    background-color: #EFF3F6;*/
/*    color: #393C3E;*/
/*}*/
.mailTable tr td p{
    margin: 8px 0;
}
.baseUserInfoPic{
    display: block;
    width: 70%;
    margin: 0 auto;
}

</style>
